/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 官网数据统计
 * */
import React, { useEffect, useRef, useMemo, useState } from 'react';
import { Button, message } from 'antd';
import DragTable from '@/components/DragTable';
import KbRemarksModal from '@/components/KbRemarksModal';
import ProTable from '@ant-design/pro-table';
import { columns } from '../index.config';
import { applyUserList } from '@/services/jdk/';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { MainSiteStatistics, ReqData } from '../index.d';
import type { JDKITEM } from '../index.d';
import styles from './index.less';

const Index = ({ type, activeKey, show, platform }: MainSiteStatistics) => {
  const actionRef = useRef<ActionType>();
  const [record, setRecord] = useState<any>({});
  const [visible, setVisible] = useState<boolean>(false);
  const requestTableData = (values: any) => {
    const { isDown = 0, current, pageSize } = values;
    const reqData: ReqData = {
      page: current,
      size: pageSize,
      isDown,
      type: platform,
    };
    return applyUserList(reqData).then(({ code, data, msg }) => {
      if (code === 0) {
        if (isDown == 1) {
          window.open(data, '_black');
          return {};
        }
        return {
          data: data.list,
          total: data.total,
        };
      } else {
        message.error(msg);
        return {};
      }
    });
  };

  const tableColumns = useMemo(() => {
    if (type == 'developer') {
      return columns.filter(
        (v) => !['resources', 'address', 'salesman'].includes(v.dataIndex as string),
      );
    }
    return columns;
  }, [type]);

  const handleOption = (data: any) => {
    setRecord(data);
    setVisible(true);
  };

  const optionColumns: ProColumns<JDKITEM>[] = [
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      hideInTable: type === 'developer',
      width: 60,
      render: (_, record_) => {
        return <a onClick={handleOption.bind(null, record_)}>备注</a>;
      },
    },
  ];

  useEffect(() => {
    if (!show || type !== activeKey) return;
    actionRef.current?.reload();
  }, [show, type, activeKey]);
  return (
    <DragTable>
      <ProTable
        rowKey='id'
        actionRef={actionRef}
        className={styles.cityPartner}
        request={requestTableData}
        columns={[...tableColumns, ...optionColumns]}
        options={false}
        pagination={{
          pageSize: 20,
          showQuickJumper: false,
          showSizeChanger: false,
        }}
        search={{
          labelWidth: 'auto',
          collapseRender: () => false,
          optionRender: () => [
            <Button key='phone' type='primary' onClick={requestTableData.bind(null, { isDown: 1 })}>
              导出
            </Button>,
          ],
        }}
        scroll={{ x: 1070 }}
      />
      <KbRemarksModal
        modalTitle={`添加备注 ｜ ${record.name} - ${record.phone}`}
        required
        visible={visible}
        setVisible={setVisible}
        formatDataMap={{
          label: 'operator_name',
          remark: 'remark',
          user: 'operator_mobile',
          time: 'created_at',
        }}
        api='/jdk/home/saveRemark'
        formData={{ id: record.id }}
        listApi='/jdk/home/getRemarkList'
        listFormData={{ id: record.id }}
      ></KbRemarksModal>
    </DragTable>
  );
};

export default Index;
